<template>
  <div>
    <el-container id="add">
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>车辆备案</el-breadcrumb-item>
            <el-breadcrumb-item>运输车辆备案</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">添加运输车辆备案</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main style="overflow-y:auto">
        <el-form style="background: white; padding: 20px" :model="form" :rules="rules" ref="ruleFormRef" label-width="120px" scroll-to-error>
          <!-- 横条 车辆进出登记 -->
          <div class="head-bar">
            <div class="head-bar-main"></div>
            <div>
              <h4>车辆进出登记</h4>
            </div>
          </div>
          <el-row>
             <el-col :span="9">
              <el-form-item label="查询车辆是否备案" label-width="180px">
                <el-input clearable  style="width: 300px;height:40px" v-model="form.cl_cph" class="w-50 m-2" placeholder="请填写正确的车牌号"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
             <el-button  type="primary" style="margin-top: 3px;margin-left:20px"  icon="search" @click="selectCph(form)">查询</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="出入类型">
                <el-select clearable  v-model="form.typeOfAcces" placeholder="请选择">
                  <el-option label="入厂" value="入厂" />
                  <el-option label="出厂" value="出厂" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记事由">
                <!--<el-input clearable style="width: 220px" v-model="form.cl_dengjishiyou" class="w-50 m-2" placeholder="请填写"/>-->
                <el-select clearable  v-model="form.cl_dengjishiyou" placeholder="请选择">
                  <el-option label="送货" value="送货" />
                  <el-option label="提货" value="提货" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="送/提货单位">
                <el-input clearable  style="width: 220px" v-model="form.cl_tihuodanwei" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输货物">
                <el-input clearable  style="width: 220px" v-model="form.cargo_type" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输量/吨">
                <el-input clearable  style="width: 220px" v-model="form.cl_huowushuliang" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起运地">
                <el-input clearable  style="width: 220px" v-model="form.cl_qiyundi" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="受(拜)访部门">
                <el-input clearable  style="width: 220px" v-model="form.bumen_type" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="受(拜)访人员">
                <el-input clearable  style="width: 220px" v-model="form.bumen_name" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="同行人员">
                <el-input clearable  style="height: 60px; width: 640px" v-model="form.peers" placeholder="请输入姓名、身份证号、联系方式"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 横条 车辆及司机信息 -->
          <div class="head-bar">
            <div class="head-bar-main"></div>
            <div>
              <h4>车辆及司机信息</h4>
            </div>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="司机姓名" prop="sj_name">
                <el-input clearable   style="width: 220px" v-model="form.sj_name" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="司机电话" prop="sj_phone">
                <el-input clearable  style="width: 220px" v-model="form.sj_phone" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌颜色" prop="licensePlateColor">
                <el-select clearable   v-model="form.licensePlateColor" placeholder="请选择">
                  <el-option label="蓝色" value="蓝色" />
                  <el-option label="绿色" value="绿色" />
                  <el-option label="白色" value="白色" />
                  <el-option label="黄色" value="黄色" />
                  <el-option label="黑色" value="黑色" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="车型描述">
<!--              <el-input clearable   style="width: 220px" v-model="form.vehicleType" class="w-50 m-2" placeholder="请填写"/>-->
                <el-select clearable  v-model="form.vehicleType" placeholder="请选择">
                  <el-option label="面包车" value="面包车" />
                  <el-option label="轿车" value="轿车" />
                  <el-option label="SUV" value="SUV" />
                  <el-option label="厢货" value="厢货" />
                  <el-option label="货车" value="货车" />
                  <el-option label="叉车" value="叉车" />
                  <el-option label="特种车辆" value="特种车辆" />
                  <el-option label="其他车型" value="其他车型" />
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <!--图片上传-->
            <el-row>
            <el-col :span="3" style="margin-left: 25px">
              <div class="UPtsxt"><span>行驶证正本</span></div>
            <el-upload  v-model="form.drivingLicense" class="avatar-uploader"  :file-list="state.fileListLicense"
                action='#' :http-request="uploadAction" :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                :on-remove="handleRemoveLicense" :on-preview="selectLicense" :class="{hide:showUploadLicense}">
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
             </el-upload>
              </el-col>
            <el-col :span="3" style="margin-left: 25px">
              <div class="UPtsxt"><span>行驶证副本</span></div>
            <el-upload v-model="form.vehiclePhoto" class="avatar-uploader" :file-list="state.fileListPhoto"
              action='#' :http-request="uploadvehiclePhoto" :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
              :on-remove="handleRemoveVehicle" :on-preview="selectV" :class="{hide:showUploadV}">
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
          </el-upload>
              </el-col>
                <el-col :span="3" style="margin-left: 25px">
                <div class="UPtsxt"><span>随车清单</span></div>
                <el-upload v-model="form.accompanyingList" class="avatar-uploader" :file-list="state.fileListACC"
                  action='#' :http-request="uploadAccompanyingList" :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                  :on-remove="handleRemoveAcc" :on-preview="handlePictureCardPreviewAcc" :class="{hide:showUpload}"  >
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
            </el-upload>
            </el-col>
             </el-row>
          <el-row>
            <el-col :span="20" style="margin: 40px 25px 20px">
              <el-tag class="ml-2" type="danger">图片操作为本地操作,点击添加、删除或预览图片,完成后提交上传数据。</el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="车牌号" prop="cl_cph">
                <el-input clearable :disabled="disabledCph" @change="isVehicleNumber"  style="width: 220px" v-model="form.cl_cph" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="燃料类型" prop="vehicleFuel">
                <el-select clearable  v-model="form.vehicleFuel" placeholder="请选择">
                  <el-option label="汽油" value="汽油" />
                  <el-option label="柴油" value="柴油" />
                  <el-option label="电(以电能驱动的汽车)" value="电(以电能驱动的汽车)" />
                  <el-option label="混合油" value="混合油" />
                  <el-option label="天然气" value="天然气" />
                  <el-option label="液化石油气" value="液化石油气" />
                  <el-option label="甲醇" value="甲醇" />
                  <el-option label="乙醇" value="乙醇" />
                  <el-option label="太阳能" value="太阳能" />
                  <el-option label="混合动力" value="混合动力" />
                  <el-option label="氢" value="氢" />
                  <el-option label="生物燃料" value="生物燃料" />
                  <el-option label="无(限全挂车等无动力)" value="无(限全挂车等无动力)" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="排放阶段" prop="vehicleEmissions">
                <el-select clearable  v-model="form.vehicleEmissions" placeholder="请选择">
                  <el-option label="国0" value="国0" />
                  <el-option label="国Ⅰ" value="国Ⅰ" />
                  <el-option label="国Ⅱ" value="国Ⅱ" />
                  <el-option label="国Ⅲ" value="国Ⅲ" />
                  <el-option label="国Ⅳ" value="国Ⅳ" />
                  <el-option label="国Ⅴ" value="国Ⅴ" />
                  <el-option label="国Ⅵ" value="国Ⅵ" />
                  <el-option label="新能源" value="新能源" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="所有人" prop="cl_cz">
                <el-input clearable  style="width: 220px" v-model="form.cl_cz" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用性质" prop="natureOfVehicleUse">
                <el-select clearable  v-model="form.natureOfVehicleUse" placeholder="请选择">
                  <el-option label="非营运" value="非营运" />
                  <el-option label="营转非" value="营转非" />
                  <el-option label="货运" value="货运" />
                  <el-option label="租赁" value="租赁" />
                  <el-option label="危险货物运输" value="危险货物运输" />
                  <el-option label="其他" value="其他" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="地址" prop="cl_dz">
                <el-input clearable  style="width: 650px" v-model="form.cl_dz" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="注册日期" prop="registernDate">
                <el-date-picker clearable  v-model="form.registernDate" type="date" placeholder="请选择"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期" prop="certificateDate">
                <el-date-picker clearable   v-model="form.certificateDate" type="date" placeholder="请选择"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆类型" prop="modeldescription">
              <el-input clearable style="width: 220px" v-model="form.modeldescription" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="品牌型号" prop="cl_ppxh">
                <el-input clearable  style="width: 220px" v-model="form.cl_ppxh" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆识别代码" prop="cl_sbm">
                <el-input clearable  style="width: 220px" v-model="form.cl_sbm" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核定载质量">
                <el-input clearable  style="width: 210px" v-model="form.cl_hdzzl" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="发动机号码">
                <el-input clearable  style="width: 220px" v-model="form.cl_fdjhm" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发动机型号">
                <el-input clearable  style="width: 220px" v-model="form.cl_fdjxh" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="是否安装OBD">
                <el-select clearable style="width: 220px"  v-model="form.obdInstallation" placeholder="请选择">
                  <el-option label="是" value="是" />
                  <el-option label="否" value="否" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="OBD安装日期">
                <el-date-picker clearable  v-model="form.obdInstallDate" type="date" placeholder="请选择"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <div style="margin: 10px auto 20px">
              <el-col>
                <el-button class="sele-but" v-if="but==1" @click="insert(form)">保存</el-button>
                <el-button class="sele-but" v-if="but==2"  @click="update (form)">修改</el-button>
                <el-button class="empty-but" @click="close()">取消</el-button>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-main>
      <!--行驶证正本查看图片-->
      <el-dialog v-model="drivingLicenseDig" >
        <el-image :src="form.drivingLicense" />
      </el-dialog>
       <!--行驶证副本查看图片-->
      <el-dialog v-model="vehiclePhotoDig" >
        <el-image :src="form.vehiclePhoto" />
      </el-dialog>
      <!--随车清单查看图片-->
      <el-dialog v-model="dialogVisible" >
        <el-image :src="form.accompanyingList" />
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import { reactive, ref, onMounted, watch, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import {Add, updateData, uploadImg, selectCPH} from "@/api/mobilePollution";
import { UploadProps } from "element-plus";
// 路由
import { useRoute, useRouter } from "vue-router";
import ChildComponents from "./listPage.vue";
import moment from 'moment'
import { v3ImgPreviewFn } from "v3-img-preview";
export default {
  setup() {
    //图片上传
    const state = reactive({
      bannerUrl: '',
      fileList: [],
      fileName: '',
      fileListLicense:[],
      fileListPhoto:[],
      fileListACC:[]
    })
    const handleExceed = (files, fileList) => {
      if (state.fileList.length >= 1) {
        ElMessage.error('只能上传一个图片')
        return;
      }
    }
    const beforeUpload = (file) => {
      const type = ['image/jpeg', 'image/jpg', 'image/png']
      if (type.indexOf(file.type) === -1) {
        ElMessage.error('上传的文件必须是JPG、JPEG、PNG三种之一!')
        return false
      } else if (file.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过2MB!')
        return false
      }
    }
    //行驶证正本
    const  showUploadLicense = ref(false)
    const drivingLicenseDig = ref(false)
    const handleRemoveLicense= (uploadFile, uploadFiles) => {
      form.drivingLicense = null
      showUploadLicense.value = false
    }
    const selectLicense = (uploadFile) => {
      // form.drivingLicense = uploadFile.url
      // drivingLicenseDig.value = true
      v3ImgPreviewFn(uploadFile.url)
    }
    const uploadAction = (option) => {
      showUploadLicense.value = true
      let param = new FormData();
      param.append('files', option.file);
      uploadImg(param).then((res) => {
        if (res && res.code === 200) {
          form.drivingLicense = res.data[0]
          // state.fileListLicense = []
          showUploadLicense.value = true
          ElMessage.success('上传成功！');
        }else {
          state.fileListLicense = []
          showUploadLicense.value = false
          ElMessage.error('上传失败,请重试');
        }
      })
    }
    //车辆照片（正面）
    const vehiclePhotoDig = ref(false)
    const  showUploadV = ref(false)
    const handleRemoveVehicle= (uploadFile, uploadFiles) => {
      form.vehiclePhoto = null
      showUploadV.value = false
    }
    const selectV = (uploadFile) => {
      // form.vehiclePhoto = uploadFile.url
      // vehiclePhotoDig.value = true
      v3ImgPreviewFn(uploadFile.url)
    }
    const uploadvehiclePhoto = (option) => {
      showUploadV.value = true
      let param = new FormData();
      param.append('files', option.file);
      uploadImg(param).then((res) => {
        if (res && res.code === 200) {
          form.vehiclePhoto = res.data[0]
          // state.fileListPhoto = []
          showUploadV.value = true
          ElMessage.success('上传成功！');
        }else {
          state.fileListPhoto = []
          showUploadV.value = false
          ElMessage.error('上传失败,请重试');
        }
      })
    }
    //随车清单（正面）
    const dialogVisible = ref(false)
    const  showUpload = ref(false)
    const handleRemoveAcc= (uploadFile, uploadFiles) => {
      form.accompanyingList = null
      showUpload.value = false
    }
    const handlePictureCardPreviewAcc = (uploadFile) => {
      // form.accompanyingList = uploadFile.url
      // dialogVisible.value = true
      v3ImgPreviewFn(uploadFile.url)
    }
    const uploadAccompanyingList = (option) => {
      showUpload.value = true
      let param = new FormData();
      param.append('files', option.file);
      uploadImg(param).then((res) => {
        if (res && res.code === 200) {
          form.accompanyingList = res.data[0]
          // state.fileListACC = []
          showUpload.value = true
          ElMessage.success('上传成功！');
        }else {
          state.fileListACC = []
          showUpload.value = false
          ElMessage.error('上传失败,请重试');
        }
      })
    }
    const route = useRoute();
    const router = useRouter();
    onMounted(() => {
      // document.querySelector('#add')['style'].height
      //     = (document.documentElement.clientHeight - 90) + 'px';
    });
    //根据车牌号查询
    let form = reactive({ });
    const but = ref(1)
    const disabledCph = ref(false)
    const selectCph = (t_form) => {
      selectCPH({cl_cph: form.cl_cph,status_a:'2'}).then((res)=>{
        if (res.code==200){
          but.value = 2
          disabledCph.value = true
          ElMessage.success("查询成功")
          let obj = {...res.data[0],...res.data[0].vehicleMessage,...res.data[0].register}
          for(let key in obj){
            form[key] = obj[key]
          }
          form.cl_cph = res.data[0].cl_cph
          form.vehicleEmissions = res.data[0].vehicleEmissions
          form.sj_name = res.data[0].sj_name
          form.typeOfAcces = res.data[0].typeOfAcces
          if(form.drivingLicense == null){
            state.fileList = []
            showUploadLicense.value = false
          }else {
            let drivingLicenseURL = `${process.env.VUE_APP_BASE_API}\/${form.drivingLicense}`
            state.fileListLicense=[{url:drivingLicenseURL}]
            showUploadLicense.value = true
          }
          if(form.vehiclePhoto == null){
            state.fileListPhoto = []
            showUploadV.value = false
          }else {
            let vehiclePhotoURL = `${process.env.VUE_APP_BASE_API}\/${form.vehiclePhoto}`
            state.fileListPhoto=[{url:vehiclePhotoURL}]
            showUploadV.value = true
          }
          if(form.accompanyingList == null){
            state.fileListACC = []
            showUpload.value = false
          }else {
            let accompanyingListURL = `${process.env.VUE_APP_BASE_API}\/${form.accompanyingList}`
            state.fileListACC=[{url:accompanyingListURL}]
            showUpload.value = true

          }
        }else {
          ElMessage.error("未查询到该车辆信息,请备案")
        }
      })
    }
    // 跳转回列表页
    const close = () => {
      sessionStorage.removeItem("userObj");
      router.push({
        path: "/transportIndex",
      });
    };
    //处理数据结构
    const krRunFlat = (obj,fp="")=>{
      let kr_obj = {}
      for(let key in obj){
        if(typeof obj[key] == "object" && !obj[key].length){
          let kr_fp = fp+key+"__"
          kr_obj = {...kr_obj,...krRunFlat(obj[key],kr_fp)}
        }else{
          kr_obj[fp+key] = obj[key]
        }
      }
      return kr_obj
    }
    //新增
    const insert = (form) => {
      if (!form) return
      ruleFormRef.value.validate(valid=>{
        if (valid) {
          //obd安装日期
          if (form.obdInstallDate){
            form.obdInstallDate = moment(form.obdInstallDate).format('YYYY-MM-DD')
          } else {
            form.obdInstallDate = ''
          }
          //注册日期
          if(form.registernDate){
            form.registernDate=moment(form.registernDate).format('YYYY-MM-DD')
          }else{
            form.registernDate = ''
          }
          //发证日期
          if(form.certificateDate){
            form.certificateDate=moment(form.certificateDate).format('YYYY-MM-DD')
          }else{
            form.certificateDate = ''
          }
          if (form.drivingLicense == undefined ){
            ElMessage.error("请上传行驶证正本")
          }else if(form.vehiclePhoto == undefined ){
            ElMessage.error("请上传行驶证副本")
          }else if(form.accompanyingList == undefined ){
            ElMessage.error("请上传随车清单")
          }else {
            let obj1 = {
              typeOfAcces:form.typeOfAcces,
              bumen_type:form.bumen_type,
              bumen_name:form.bumen_name,
              sj_name:form.sj_name,
              cl_cph:form.cl_cph,
              vehicleEmissions:form.vehicleEmissions,
              register:{
                peers:form.peers,
                cl_dengjishiyou:form.cl_dengjishiyou,
                cl_tihuodanwei:form.cl_tihuodanwei,
                cargo_type:form.cargo_type,
                cl_huowushuliang:form.cl_huowushuliang,
                cl_qiyundi:form.cl_qiyundi
              },
              vehicleMessage:{
                accompanyingList: form.accompanyingList,
                cl_cz: form.cl_cz,
                cl_dz:form.cl_dz,
                cl_fdjhm: form.cl_fdjhm,
                cl_fdjxh: form.cl_fdjxh,
                cl_hdzzl: form.cl_hdzzl,
                cl_ppxh: form.cl_ppxh,
                cl_sbm: form.cl_sbm,
                drivingLicense: form.drivingLicense,
                licensePlateColor:form.licensePlateColor,
                modeldescription: form.modeldescription,
                natureOfVehicleUse: form.natureOfVehicleUse,
                obdInstallDate: form.obdInstallDate,
                obdInstallation: form.obdInstallation,
                registernDate: form.registernDate,
                sj_phone: form.sj_phone,
                vehicleFuel:form.vehicleFuel,
                vehiclePhoto: form.vehiclePhoto,
                vehicleType:form.vehicleType,
                certificateDate:form.certificateDate
              }
            }
            form = obj1
            Add(form).then((res) => {
              if (res.code == 200) {
                ElMessage.success('保存成功！');
                router.push("/transportIndex");
              }else if(res.code == 800){
                ElMessage.error('保存失败,车牌号已存在,请重新填写车牌号！');
              }else{
                ElMessage.error('保存失败')
              }
            });
          }
        } else {
          ElMessage.error("请填写必填项")
        }
      })
    }
    //修改
    const update = (form) => {
      if (!form) return
      ruleFormRef.value.validate(valid=>{
        if (valid) {
          //obd安装日期
          let obdInst = moment(form.obdInstallDate).format('YYYY-MM-DD')
          form.obdInstallDate =  obdInst
          if (form.obdInstallDate === 'Invalid date'){
            form.obdInstallDate = ''
          }
          //注册日期
          let register=moment(form.registernDate).format('YYYY-MM-DD')
          form.registernDate = register
          if (form.registernDate === 'Invalid date'){
            form.registernDate = ''
          }
          //发证日期
          let certif=moment(form.certificateDate).format('YYYY-MM-DD')
          form.certificateDate = certif
          if (form.certificateDate === 'Invalid date'){
            form.certificateDate = ''
          }
          if (form.drivingLicense == "" ){
            ElMessage.error("请上传行驶证正本")
          }else if(form.vehiclePhoto == ""){
            ElMessage.error("请上传行驶证副本")
          }else if(form.accompanyingList == ""){
            ElMessage.error("请上传随车清单")
          }else {
            let obj1 = {
              cl_id:route.query.id,
              typeOfAcces:form.typeOfAcces,
              bumen_type:form.bumen_type,
              bumen_name:form.bumen_name,
              sj_name:form.sj_name,
              cl_cph:form.cl_cph,
              vehicleEmissions:form.vehicleEmissions,
              register:{
                registerid:form.registerid,
                peers:form.peers,
                cl_dengjishiyou:form.cl_dengjishiyou,
                cl_tihuodanwei:form.cl_tihuodanwei,
                cargo_type:form.cargo_type,
                cl_huowushuliang:form.cl_huowushuliang,
                cl_qiyundi:form.cl_qiyundi
              },
              vehicleMessage:{
                vehicle_id:form.vehicle_id,
                accompanyingList: form.accompanyingList,
                cl_cz: form.cl_cz,
                cl_dz:form.cl_dz,
                cl_fdjhm: form.cl_fdjhm,
                cl_fdjxh: form.cl_fdjxh,
                cl_hdzzl: form.cl_hdzzl,
                cl_ppxh: form.cl_ppxh,
                cl_sbm: form.cl_sbm,
                drivingLicense: form.drivingLicense,
                licensePlateColor:form.licensePlateColor,
                modeldescription: form.modeldescription,
                natureOfVehicleUse: form.natureOfVehicleUse,
                obdInstallDate: form.obdInstallDate,
                obdInstallation: form.obdInstallation,
                registernDate: form.registernDate,
                sj_phone: form.sj_phone,
                vehicleFuel:form.vehicleFuel,
                vehiclePhoto: form.vehiclePhoto,
                vehicleType:form.vehicleType,
                certificateDate:form.certificateDate
              }
            }
            updateData(obj1).then((res) => {
              if (res.code == 200) {
                ElMessage.success('保存成功！');
                router.push("/transportIndex");
              }else{
                ElMessage.success('保存失败！');
              }
            });
          }
        } else {
          ElMessage.error("请填写必填项")
        }
      })
    }
// 校验
    const ruleFormRef = ref();
    const rules = {
      sj_name:[{
        required:true,
        message:"请填写司机姓名",
        trigger:"blur"
      }],
      sj_phone:[{
        required:true,
        message:"请填写司机电话",
        trigger:"blur"
      },
        {
          max:11,
          message: '电话号码最大长度为11位',
          trigger: 'blur'
        },
      {
        pattern:/^1\d{10}$/,
        message: '请填写正确的电话号码',
        trigger: 'blur'
      }],
      licensePlateColor:[{
        required:true,
        message:"请选择车牌颜色",
        trigger:"change"
      }],
      cl_cph:[{
        required:true,
        message:"请填写车牌号",
        trigger:"blur"
      },
        {
          max:8,
          message:'车牌号最大长度为8位',
          trigger:'blur'
        },
       {
        pattern: /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/,
        message:'请填写正确的车牌号',
        trigger: 'blur'
      }],
      vehicleFuel:[{
        required:true,
        message:"请选择燃料类型",
        trigger:"change"
      }],
      cl_cz:[{
        required:true,
        message:"请填写所有人",
        trigger:"blur"
      }],
      natureOfVehicleUse:[{
        required:true,
        message:"请选择使用性质",
        trigger:"change"
      }],
      cl_dz:[{
        required:true,
        message:"请填写地址",
        trigger:"blur"
      }],
      registernDate:[{
        required:true,
        message:"请选择注册日期",
        trigger:"blur"
      }],
      certificateDate:[{
        required:true,
        message:"请选择发证日期",
        trigger:"change"
      }],
      modeldescription:[{
        required:true,
        message:"请选择车辆类型",
        trigger:"change"
      }],
      cl_ppxh:[{
        required:true,
        message:"请填写品牌型号",
        trigger:"blur"
      }],
      cl_sbm:[{
        required:true,
        message:"请填写车辆识别码",
        trigger:"blur"
      }],
      vehicleEmissions:[{
        required:true,
        message:"请选择排放类型",
        trigger:"change"
      }]
    };
    //车牌号验证方法

    function isVehicleNumber(vehicleNumber) {

      var xreg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;

      var creg=/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;

      if(vehicleNumber.length == 7){

        return creg.test(vehicleNumber);

      } else if(vehicleNumber.length == 8){

        return xreg.test(vehicleNumber);

      } else{

        return false;

      }

    }

    return { isVehicleNumber,rules,ruleFormRef,but,disabledCph,update,selectCph ,form,showUploadV,selectLicense,selectV,vehiclePhotoDig,drivingLicenseDig,showUploadLicense,handleRemoveLicense, handleRemoveAcc,handleRemoveVehicle,insert,dialogVisible,showUpload,handleRemoveVehicle,handlePictureCardPreviewAcc, close,state,handleExceed,beforeUpload,uploadAction,uploadvehiclePhoto,uploadAccompanyingList };
  },
  mounted(){
    window.vue = this
  },
};
</script>
<style scoped>
/*超出限制 隐藏图片上传*/
::v-deep.hide .el-upload--picture-card {
  display: none;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 横条蓝条样式 */

.head-bar {
  width: 100%;
  height: 40px;
  display: flex;
}

.head-bar-main {
  width: 3px;
  height: 20px;
  opacity: 1;
  background: #3780b9;
  margin-right: 11px;
}
/* 文件上传文字样式 */

.UPtsxt {
  width: 120px;
  height: 30px;
}
/* 文件上传样式 */

.avatar-uploader {
  width: 120px;
  height: 120px;
  background-color: #e5f4ff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #3780b9;
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar-img{
  width:120px;
  height:120px
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}

</style>
